<!--
 * @Author: 无聊 7989314+Hwz1997@user.noreply.gitee.com
 * @Date: 2025-06-23 14:40:02
 * @LastEditors: 无聊 7989314+Hwz1997@user.noreply.gitee.com
 * @LastEditTime: 2025-06-23 14:46:37
 * @FilePath: \project_keep\keep_motion_manger\src\components\lintCode\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 绑定 canvasRef 到 canvas 元素 -->
  <canvas ref="canvasRef" :width="options.width" :height="options.height"></canvas>
</template>

<script setup>
import { useMcaptcha } from '@/utils/mcaptcha.js';

const props = defineProps({
  options: {
    type: Object,
    default: () => ({
      width: 120,
      height: 40
    })
  }
});

const { createCodeImg, validate, refresh, canvasRef } = useMcaptcha(props.options);

defineExpose({
  validate,
  refresh
});
</script>

<style scoped>
  canvas {
    cursor: pointer;
    margin-left: 10px;
  }
</style>